<!--
Copyright The Closure Library Authors. All Rights Reserved.

Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<style type="text/css">
 .goog-menu {
  position: absolute;
  color: #aaa;
}

.goog-scrollable-menu {
  max-height:30px;
  overflow-y:auto;
}
</style>
<p>
 Here's a menu defined in markup:
</p>
<div class="goog-menu" id="demoMenu">
 <div class="goog-menuitem" id="menuItem1">
  Annual Report.pdf
 </div>
 <div class="goog-menuitem" id="menuItem2">
  Quarterly Update.pdf
 </div>
 <div class="goog-menuitem" id="menuItem3">
  Enemies List.txt
 </div>
</div>
<p>
 Here's a menu which has been rendered with an explicit content node:
</p>
<div class="goog-menu" id="complexMenu">
 <div style="border:1px solid black;">
  <div class="goog-menu-content">
   <div class="goog-menuitem" id="complexItem1">
    Drizzle
   </div>
   <div class="goog-menuitem" id="complexItem2">
    Rain
   </div>
   <div class="goog-menuitem" id="complexItem3">
    Deluge
   </div>
  </div>
 </div>
</div>
<p>
 Here's a scrollable menu:
</p>
<div class="goog-menu goog-scrollable-menu" id="scrollableMenu">
 <div class="goog-menuitem" id="scrollableMenuItem1">
  Auk
 </div>
 <div class="goog-menuitem" id="scrollableMenuItem2">
  Bird
 </div>
 <div class="goog-menuitem" id="scrollableMenuItem3">
  Crow
 </div>
 <div class="goog-menuitem" id="scrollableMenuItem4">
  Duck
 </div>
 <div class="goog-menuitem" id="scrollableMenuItem5">
  Emu
 </div>
</div>